<template>
    <h1 class="row-title">基本使用</h1>
    <div class="row">
        <!-- 卡片一 -->
        <Xq-Card img-src="/yz.jpg" summary="英斯迪尔（INSDEA）家用电脑椅男生游戏电竞椅座椅懒人电脑沙发椅卧室办工..." />
        <!-- 卡片二 -->
        <Xq-Card img-src="/sh.jpg" summary="半球 （PESKOE）烧水壶热水壶电热水壶一体全自动恒温大容量家用快速壶开...">
            <!-- 插槽内部的内容样式由用户自己决定 -->
            <template #footer>
                <div class="footer">
                    <div class="level">烧水壶 · 5225购买</div>
                    <div class="price">￥39.00</div>
                </div>
            </template>
        </Xq-Card>
    </div>
<!--    <h1 class="row-title">第二组</h1>-->
<!--    <div class="row">-->
<!--        <Xq-Card  :width="368" :img-height="90">-->
<!--            <div>蓝天白云</div>-->
<!--            &lt;!&ndash; 插槽内部的内容样式由用户自己决定 &ndash;&gt;-->
<!--            <template #footer>-->
<!--                <div class="footer-java">-->
<!--                    <div class="level">3步骤 · 3门课</div>-->
<!--                    <div class="level">10982收藏</div>-->
<!--                </div>-->
<!--            </template>-->
<!--        </Xq-Card>-->
<!--    </div>-->
</template>

<script setup></script>

<style lang="scss" scoped>
.footer {
    padding: 0 8px;
    font-size: 12px;
    text-align: left;
}
.level {
    color: #9199a1;
    margin-bottom: 8px;
}

.price {
    color: #f01414;
}

.footer-java {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 0 8px;
}
</style>
